<script setup lang="ts">
import type { OperateItem } from '@/common/types/user'

defineProps<{
  /** 操作名称 */
  operateItem: OperateItem
}>()

const emits = defineEmits(['onClick'])
</script>

<template>
  <!-- 用户操作项组件 -->
  <view :url="operateItem.path" class="user-operate-item" @click="emits('onClick')">
    <text class="user-operate-item-name">
      {{ operateItem.name }}
    </text>
    <image class="user-operate-item-icon" :src="operateItem.icon" mode="scaleToFill" />
  </view>
</template>

<style scoped lang="scss">
.user-operate-item {
  display: flex;
  align-items: center;

  height: 180rpx;
  background: radial-gradient(circle at 83% 77%, $color-white 38%, $color-primary 30%, $color-primary);
  border-radius: $border-radius-base;
  box-shadow: $shadow-raised-2;

  &-name {
    font-size: $font-size-lg;
    color: $color-white;
    flex: 1;
    text-align: center;
  }

  &-icon {
    flex: 1;
    width: 60rpx;
    height: 60rpx;
  }
}
</style>
